import React, {Component} from 'react';
import {View, Image, Block, Text} from '@tarojs/components'
import {AtIcon} from 'taro-ui'
import {gotoPage} from '../../utils/tools'
import './curtain.scss'


interface PropsType {
  url: string
  goodName: string
  goodImg: string
  goodPrice: string
  onClose: any
  bgImg: string
}

export default class Curtain extends Component<PropsType> {
  static defaultProps = {
    url: '',
    goodImg: '',
    goodName: '',
    goodPrice: '0',
    onClose: () => {
    },
    bgImg: '',
  }

  close(e) {
    e.stopPropagation()
    if (this.props.onClose) {
      this.props.onClose()
    }
  }

  render() {
    return (
      <View onClick={this.close.bind(this)} className={`curtainRoot curtainRoot-${process.env.TARO_ENV}`}
        hoverClass='none'
      >
        {!this.props.goodName &&
          <View onClick={() => gotoPage(this.props.url)} className={`image-box ${process.env.TARO_ENV}-image-box`}>
            {process.env.P_ENV === 'kd' && <Image className='image animation no-goods-name' src={this.props.bgImg}
              style='width: 242px;height: 391px;' mode='aspectFill'
            />}
            {process.env.P_ENV !== 'kd' && <Image className='image animation' src={this.props.bgImg} mode='widthFix' />}
            {process.env.TARO_ENV === 'h5' &&
              <View className={` ${process.env.TARO_ENV}`} onClick={this.close.bind(this)}><AtIcon
                value='close'
              /></View>}
          </View>}
        {this.props.goodName && <Block>
          <View className='box animation' onClick={() => gotoPage(this.props.url)}>
            <Image className='image' src={this.props.bgImg} mode='widthFix' style='width: 100%;' />
            <View className='info'>
              <View className='cover'><Image className='img' src={this.props.goodImg} mode='aspectFill'
                style='width:240rpx; height:140rpx;'
              /></View>
              <View className='right'>
                <View className='title'>{this.props.goodName}</View>
                <View className='price'><Text className='symbol'>¥</Text>{this.props.goodPrice}<Text
                  className='symbolText'
                >起</Text></View>
              </View>
            </View>
            {process.env.TARO_ENV === 'h5' &&
              <View className={` ${process.env.TARO_ENV}`} onClick={this.close.bind(this)}><AtIcon
                value='close'
              /></View>}
          </View>
        </Block>}
        {process.env.TARO_ENV !== 'h5' &&
          <View className={`icon-guanbi1 ${process.env.TARO_ENV}`} onClick={this.close.bind(this)}><AtIcon
            value='close'
          /></View>}
      </View>
    )
  }
}
